<template>
    <div class="example2-wrapper">
        <div class="inner">
            <bk-table style="width: 700px;float:right;margin-right:20px;margin-top:20px"
                :data="tabledata"
                height="250"
                @row-mouse-enter="handleRowMouseEnter"
                @row-mouse-leave="handleRowMouseLeave">
                <bk-table-column label="衣服类型" prop="type"></bk-table-column>
                <bk-table-column label="洗衣模式" prop="Washmethod"></bk-table-column>
                <bk-table-column label="单价(元/件)" prop="price"></bk-table-column>
                <bk-table-column label="数量" prop="num"></bk-table-column>
            </bk-table>
            <div style="margin:20px 30px 20px 20px;float:left">
                <p>订单状态:</p>
                <bk-timeline :list="statusList" style="with:300px"></bk-timeline>
            </div>
        </div>
        <div style="margin-left:300px;margin-top:20px;float:left" :hidden="rate.isRated === '0'">
            <p>订单评分:</p>
            <p>速度:</p>
            <bk-rate :rate.sync="rate.rates" :edit="false" :tooltips="tooltipss" :width="30" :height="30"></bk-rate>
            <p>价格:</p>
            <bk-rate :rate.sync="rate.ratep" :edit="false" :tooltips="tooltipsp" :width="30" :height="30"></bk-rate>
            <p>质量:</p>
            <bk-rate :rate.sync="rate.rateq" :edit="false" :tooltips="tooltipsq" :width="30" :height="30"></bk-rate>
        </div>
        <div style="margin-left:300px;margin-top:20px;float:left" :hidden="rate.isRated === '1'">
            <p style="font-size:24px">顾客尚未评分!</p>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            const user = sessionStorage.getItem('user')
            // console.log(user)
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            this.getorderstatus()
            return {
                username: '',
                tabledata: [
                ],
                rate: {},
                statusList: [
                    {
                        tag: '下单成功',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '等待商家上门取衣',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '等待洗衣',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '洗衣完成',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '商家送衣',
                        content: '',
                        color: 'green',
                        filled: true
                    },
                    {
                        tag: '订单完成',
                        content: '',
                        color: 'green',
                        filled: true
                    }
                ]
            }
        },
        created () {
        },
        methods: {
            getorderstatus () {
                const qs = require('qs')
                this.axios({
                    url: '/getorderby_id/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'order_id': this.$route.query.id
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        this.rate = res.data.Rate
                        const orderStatus = res.data.order_status
                        const index = {
                            num: 0
                        }
                        for (const i in this.statusList) {
                            if (this.statusList[i].tag === orderStatus.status) {
                                index.num = i
                                this.statusList[i].content = '<span class="timeline-update-time">' + orderStatus.updatatime + '</span>'
                            }
                        }
                        ++index.num
                        for (index.num; index.num < this.statusList.length; index.num++) {
                            this.statusList[index.num].color = 'gray'
                        }
                        for (const i in res.data.result_data) {
                            const tmp = {
                                type: '',
                                Washmethod: '',
                                price: 0,
                                num: 0
                            }
                            tmp.price = res.data.result_data[i].price
                            tmp.type = res.data.result_data[i].type
                            tmp.num = res.data.result_data[i].num
                            if (res.data.result_data[i].Washmethod === 0) {
                                tmp.Washmethod = '普通洗'
                            }
                            if (res.data.result_data[i].Washmethod === 1) {
                                tmp.Washmethod = '超强洗'
                            }
                            this.$set(this.tabledata, i, tmp)
                        }
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '服务器出现故障，请稍后访问',
                            subTitle: '此窗口3秒后关闭',
                            showFooter: false
                        })
                        let num = 3
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                })
            }
        }
    }
</script>

<style scoped>
</style>
